<template>
	<view class="box e-flex-y">
		<view class="e-m-b-38 e-flex-xy-center">
			<app-image :size="['320rpx', '224rpx']" src="user/success.png" />
		</view>

		<view class="e-m-b-30 text-center">
			{{ $t(`order.${statusList[orderType].title}`) }}
		</view>
		<view class="e-m-b-40 text-center">
			{{ $t(`order.${statusList[orderType].sub}`) }}
		</view>
		<view class="e-flex">
			<button class="e-m-r-20" @tap="backHome">{{ $t('order.返回首页') }}</button>
			<button @tap="see" v-if="orderType != 1">{{ $t(`order.${statusList[orderType].buttonText}`) }}</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useInit } from '@/common/stores';
import { useCurrentInstance } from '@/common/hooks';

const props = defineProps({
	type: String,
	pageType: String,
	id: String
});

const ctx = useCurrentInstance();
const {setTabbarPageIndex} = useInit()

const orderType = ref(props.type || 0);
const orderPageType = props.pageType || 0;

const statusList = [
	// cancel
	{
		title: '订单取消成功',
		sub: '订单已取消',
		buttonText: '查看订单'
	},
	// delete
	{
		title: '订单删除成功',
		sub: '订单已删除'
	},
	// refund
	{
		title: '申请成功',
		sub: '订单已申请退款',
		buttonText: '查看订单'
	},
	// receiving
	{
		title: '收货成功',
		sub: '订单已完成',
		buttonText: '查看订单'
	},
	// success
	{
		title: '支付成功',
		sub: '恭喜您支付成功',
		buttonText: '订单列表'
	}
];

const backHome = () => {
	setTabbarPageIndex(0);
	ctx.$switchTab('/pages/tabbar/index');
};

const orderListPageUrl = ['/pages/order', '/pages/order/reservation'];
const orderInfoPageUrl = ['/pages/systemPay/order', '/pages/order/reservation'];
const see = () => {
	if (orderType.value === '4') {
		ctx.$goRedirectTo(`${orderListPageUrl[orderPageType]}/index`);
	} else {
		ctx.$goRedirectTo(`${orderInfoPageUrl[orderPageType]}/details/index`, { id: props.id });
	}
};
</script>

<style lang="scss" scoped>
.box {
	padding-top: 158rpx;
	margin: 0 auto;
	button {
		width: 278rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		border: 2rpx solid #303133;
		font-size: 30rpx;
	}
}
</style>